<template>
  <div class="doctor-card">
    <img :src="flag === 1 ? doctorImg : nurseImg" alt="" />
    <div>
      <p>姓名：{{ data.name }}</p>
      <p>科室：{{ data.deptName }}</p>
      <p>职位：{{ data.jobName }}</p>
      <p>联系电话：{{ data.phone }}</p>
    </div>
  </div>
</template>

<script setup>
import doctorImg from "@/assets/images/doctor.svg";
import nurseImg from "@/assets/images/nurse.svg";
import { ref, watch } from "vue";
// {
//     deptCode: "218",
//     deptName: "感染科",
//     id: "89",
//     jobName: null,
//     jobNumber: "26660",
//     jobTitle: null,
//     name: "甘雷",
//     phone: null,
//   },
const props = defineProps({
  info: {
    type: Object,
    required: true,
  },
  flag: {
    type: Number,
    default: 1,
  },
});

let data = ref({});

watch(
  () => props.info,
  (val) => {
    data.value = val;
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.doctor-card {
  background: #fff;
  border-radius: 10px;
  display: flex;
  padding: 1.5vh 0.8vw;
  padding-right: 0;
  background: #e6f2ff;
  img {
    width: 5vw;
    height: 20vh;
    margin-right: 2vw;
  }
  p {
    margin-bottom: 3.5vh;
  }
  :last-child {
    margin-bottom: 0;
  }
}
</style>
